﻿<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/17-content-code/freebloggerhelp-jquery.flow.1.2.auto.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#myController").jFlow({
		slides: "#slides",
		controller: ".jFlowControl", // must be class, use . sign
		slideWrapper : "#jFlowSlide", // must be id, use # sign
		selectedWrapper: "jFlowSelected",  // just pure text, no sign
		auto: true,		//auto change slide, default true
		width: "610px",
		height: "235px",
		duration: 400,
		prev: ".jFlowPrev", // must be class, use . sign
		next: ".jFlowNext" // must be class, use . sign
	});
});
</script><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style type="text/css">
#jFlowSlide{ background:#DBF3FD; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#3AB7FF; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }
.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }
.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }
</style>




<h3>» Simple jQuery Featured Content Slider for Blogger Blog</h3>



<div class="jflow-content-slider">
		<div id="slides">
			<div class="slide-wrapper">
				<div class="slide-thumbnail">
					<img src="http://2.bp.blogspot.com/-K_2wwgsZkWw/Uhnj7LRRGGI/AAAAAAAABIM/c-I2AEoZZnk/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png" alt="How to change mouse cursor in blogger blog to animated cursors"/>
				</div>
				<div class="slide-details">
					<h2><a href="http://24work.blogspot.com/2012/01/how-to-change-mouse-cursor-in-blogger.html" target="_blank">How to change mouse cursor in blogger blog to animated cursors</a></h2>

					<div class="description">
						How to change mouse cursor in blogger blog to animated cursors.One of the best way to add extra fun to your ....<a href="#">read more</a>
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="slide-wrapper">
				<div class="slide-thumbnail">
					<img src="http://2.bp.blogspot.com/-PlV205zDJXI/Uhnm1ZN1W2I/AAAAAAAABIg/nw5gu9LTvIA/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png" alt="Numbered Page Navigation For Blogger New Script"/>
				</div>
				<div class="slide-details">
					<h2><a href="http://24work.blogspot.com/2012/01/numbered-page-navigation-for-blogger.html" target="_blank">Numbered Page Navigation For Blogger New Script</a></h2>
					<div class="description">
						Today we will see how to add a nice page number navigation hack blogger. The default navigation links (i.e Older Posts) is not the friendly visitor
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="slide-wrapper">
				<div class="slide-thumbnail">
					<img src="http://1.bp.blogspot.com/-M0EQDInUmnA/UhnoxhiOzPI/AAAAAAAABIs/BP1BBPF9NdE/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png" alt="How To Add Snow Effect On The Blogger Mouse Cursor Area"/>
				</div>
				<div class="slide-details">
					<h2><a href="http://24work.blogspot.com/2011/12/how-to-add-snow-effect-on-blogger-mouse.html" target="_blank">How To Add Snow Effect On The Blogger Mouse Cursor Area</a></h2>
					<div class="description">
						How to change mouse cursor in blogger blog to animated cursors.One of the best way to add extra fun to your blog is, changing mouse cursor on your blog.
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="slide-wrapper">
				<div class="slide-thumbnail">
					<img src="http://1.bp.blogspot.com/-RkVjrr2ep3Q/UhnqZIfLhII/AAAAAAAABI4/5dxe7L1Hgfw/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" alt="Falling Objects / Falling Text / Marquee Scrolling Text Generator for Blogger"/>
				</div>
				<div class="slide-details">
					<h2><a href="http://24work.blogspot.com/2012/01/falling-objects-falling-text-marquee.html" target="_blank">Falling Objects / Falling Text / Marquee Scrolling Text Generator for Blogger</a></h2>
					<div class="description">
						You can show the falling objects or graphics to your Blogger profile page. This generator falling objects to specify an image of your choice.
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="slide-wrapper">
				<div class="slide-thumbnail">
					<img src="http://4.bp.blogspot.com/-XMxYEw2NibM/UhozkOB-YXI/AAAAAAAABJI/N6uGRQTwrXQ/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" alt="How To Add Animated Flash Clock To Your Blogger Blog"/>
				</div>
				<div class="slide-details">
					<h2><a href="http://24work.blogspot.com/2011/12/how-to-add-animated-flash-clock-to-your.html" target="_blank">How To Add Animated Flash Clock To Your Blogger Blog</a></h2>
					<div class="description">
						Hello! `How are you guys? here"s the cool Clock.this tutorial will show you how to Add animated flash clock gadget your Blogger blog.
					</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
			
		<div id="myController">
			<span class="jFlowPrev">Prev</span>
			<span class="jFlowControl">1</span>
			<span class="jFlowControl">2</span>
			<span class="jFlowControl">3</span>
			<span class="jFlowControl">4</span>
			<span class="jFlowControl">5</span>
			<span class="jFlowNext">Next</span>
		</div>
		<div class="clear"></div>
	</div>